<!DOCTYPE html>
<html lang="en">

<head>
    <title>实时音频上传测试</title>
</head>
<body>
<h1>实时音频上传测试</h1>
<button id="startButton">开始录音</button>
<button id="stopButton">停止录音</button>
<button id="stopButton2">断开链接</button>
<p id="status"></p>


</body>
<script src="../static/jquery-3.3.1.min.js"></script>
<!--<script>-->
<!--    var socket;-->

<!--    function startRecording() {-->
<!--        socket = new WebSocket("ws://localhost:8080/audio-upload");-->
<!--        socket.onopen = function (event) {-->
<!--            $("#status").text("连接已建立，开始录音...");-->
<!--            $("#startButton").prop("disabled", true);-->
<!--            $("#stopButton").prop("disabled", false);-->
<!--        };-->

<!--        socket.onmessage = function (event) {-->
<!--            // 处理服务器返回的消息-->
<!--            console.log(event.data)-->
<!--            $("#status").text(event.data);-->
<!--        };-->

<!--        socket.onclose = function (event) {-->
<!--            console.log(event)-->
<!--            $("#status").text("连接已关闭");-->
<!--            $("#startButton").prop("disabled", false);-->
<!--            $("#stopButton").prop("disabled", true);-->
<!--        };-->

<!--        socket.onerror = function (event) {-->
<!--            $("#status").text("发生错误");-->
<!--            $("#startButton").prop("disabled", false);-->
<!--            $("#stopButton").prop("disabled", true);-->
<!--        };-->
<!--    }-->

<!--    function stopRecording() {-->
<!--        socket.close();-->
<!--    }-->

<!--    $(document).ready(function () {-->
<!--        console.log("ready");-->
<!--        $("#startButton").click(startRecording);-->
<!--        $("#stopButton").click(stopRecording);-->
<!--    });-->
<!--</script>-->
<script>
    var startButton = document.getElementById('startButton');
    var stopButton = document.getElementById('stopButton');
    var stopButto2 = document.getElementById('stopButton2');
    var statusElement = document.getElementById('status');

    var audioStream;
    var mediaRecorder;
    var webSocket;

    startButton.addEventListener('click', function () {
        startRecording();
    });

    stopButton.addEventListener('click', function () {
        stopRecording();
    });

    stopButto2.addEventListener('click', function () {
        webSocket.close();
    });


    function startRecording() {
        navigator.mediaDevices.getUserMedia({audio: true})
            .then(function (stream) {
                audioStream = stream;
                mediaRecorder = new MediaRecorder(stream);
                mediaRecorder.start(1000);
                var jsonStr="?tokenId=1116005&name=李宇航&classId=110";
                webSocket = new WebSocket('ws://localhost:8080/audio-upload'+jsonStr);
                webSocket.binaryType = 'arraybuffer';

                webSocket.onopen = function () {
                    statusElement.innerHTML = '录音中...';

                };

                webSocket.onclose = function (e) {
                    console.error('websocket 断开',e);
                    console.info(e.code + ' ' + e.reason + ' ' + e.wasClean);
                }


                webSocket.onmessage = function (event) {
                    // 接收服务器返回的状态消息
                    var message = event.data;
                    statusElement.innerHTML = message;

                };

                mediaRecorder.ondataavailable = function (event) {
                    console.log("文件大小是:", event.data.size)
                    try {
                        if (event.data.size > 0) {
                            console.log(event);
                            webSocket.send(event.data);
                        }
                    } catch (err) {
                        console.error('录音失败:', err);
                    }
                };

            })
            .catch(function (error) {
                console.error('录音失败:', error);
            });
    }

    function stopRecording() {
        if (mediaRecorder && mediaRecorder.state === 'recording') {
            mediaRecorder.stop();
            audioStream.getTracks().forEach(function (track) {
                track.stop();
            });
            webSocket.close();
            statusElement.innerHTML = '录音已停止';
        }
    }
</script>
</html>
